<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-document"></i> 概览</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div>
            <el-row :gutter="20">
            <el-col>
                <div class="schart">                
                    <schart canvasId="bar" width="800" height="400" :data="data" type="bar"   style="display:flex;justify-content:center"></schart>
                </div>
            </el-col>
            </el-row>
            <!--el-row>
                <el-col :span="5" v-for="(item, o) in items" :key="o" :offset="o !== 2 && o !==0 ? 2 : 5">
                    <el-card :body-style="{ padding: '0px', position:'relative'}">
                    <img :src="item.img" class="image">
                    <div style="padding: 14px;">
                        <span class="center-Block">{{item.sort}}</span>                        
                    </div>
                    <span class="showNum">{{ item.count }}</span>
                    </el-card>
                </el-col>
            </el-row>-->
        </div>
    </div>
</template>

<script>
    import Schart from 'vue-schart';

    export default {
        data() {
            return {
                items: [
                    {sort: '用户', count: 1, img: '../../../static/img/user.jpg'},
                    {sort: '订单', count: 1, img: '../../../static/img/order.jpg'},
                    {sort: '二维码', count: 1, img: '../../../static/img/recode.png'},
                    {sort: '等级', count: 1, img: '../../../static/img/level.jpg'}
                ],
                data:[
                    {name:'用户',value:12},
                    {name:'订单',value:434},
                    {name:'通知',value:4},
                    {name:'反馈意见',value:4},
                    {name:'二维码',value:23},
                    {name:'等级',value:432},
                    {name:'配置',value:4},
                    {name:'关于',value:56}
                    
                ]
            };
        },
        mounted () {
            this.$axios.get('http://127.0.0.1:7001/api/v2/account').then((res) => {    
                this.data[0].value=res.data.data.counts                          
            }).catch((err) => {})
            this.$axios.get('http://127.0.0.1:7001/api/v2/payorder').then((res) => {    
                this.data[1].value=res.data.data.counts                          
            }).catch((err) => {})
            this.$axios.get('http://127.0.0.1:7001/api/v2/notice').then((res) => {    
                this.data[2].value=res.data.data.counts                          
            }).catch((err) => {})  
            this.$axios.get('http://127.0.0.1:7001/api/v2/suggest').then((res) => {    
                this.data[3].value=res.data.data.counts                          
            }).catch((err) => {})  
            this.$axios.get('http://127.0.0.1:7001/api/v2/qrcode').then((res) => {    
                this.data[4].value=res.data.data.counts                          
            }).catch((err) => {})
            this.$axios.get('http://127.0.0.1:7001/api/v2/level').then((res) => {    
                this.data[5].value=res.data.data.counts                          
            }).catch((err) => {})    
            this.$axios.get('http://127.0.0.1:7001/api/v2/config').then((res) => {    
                this.data[6].value=res.data.data.counts                          
            }).catch((err) => {})   
            this.$axios.get('http://127.0.0.1:7001/api/v2/about').then((res) => {    
                this.data[7].value=res.data.data.counts                          
            }).catch((err) => {})   
        },
        components: {
            Schart
        }
    }
</script>


<style scoped>
 .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: -15px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
  .center-Block{display: flex;justify-content: center}
  .showNum{display: block;position: absolute;width: 100%;height: calc(100% - 50px);background: rgba(0, 0, 0, 0.4);
    top:0;left:0;color:#ffffff;text-align: center;padding-top: 22%;box-sizing: border-box;font-size: 4vw}
  .el-row>div{margin-bottom: 50px;}
  .crumbs{margin-bottom:70px}
</style>
